<template>
    <el-row class="solid" style="width:100%;height:420px;">
        <el-col :span="10" style="height:100%;overflow:hidden;">
            <h3 class="TextTitle" style="padding-left:20px;">法律状态</h3>
            <div id="pie" style="height:90%;width:100%;padding-left:5%;"></div>
        </el-col>
        <el-col :span="13" style="height:100%;">
            <h3 class="TextTitle"></h3>
            <p class="maxKeyName">{{maxKey}}{{parseFloat(percentage)}}%</p>
            <el-table
                :data="tableData"
                height="68%"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                style="width: 100%;border:none;"
                :row-class-name="tableRowClassName"
                :row-style="{border:'none'}"
                :cell-style="{border:'none'}">
                <el-table-column label="名称">
                    <template slot-scope="scope">
                        <p class="name_">{{scope.row.title}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="专利号">
                    <template slot-scope="scope">
                        <p class="num">{{scope.row.pn}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="pantentScore"
                    width="80"
                    label="分数">
                </el-table-column>
            </el-table>
            <el-col :span="24" style="height:10%;text-align:center;padding-top:10px;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="ipi"
                    :page-size="ips"
                    :total="total">
                </el-pagination>
            </el-col>
        </el-col>
    </el-row>
</template>
<script>
import {mapState} from 'vuex'
import resize from '@/utils/resize'
export default {
    mixins:[resize],
    data(){
        return {
            chart: null,
            tableData: [],
            data:[], // 文字的data
            chartData: [],
            maxKey:'',
            loading: false,
            ips:5,
            total:0,
            ipi:1,
            Index: '',
            allTotal: 0 ,
            percentage:0
        }
    },
    props:['codeData'],
    computed:{
        ...mapState(['levelCode'])
    },
    watch:{
        codeData:{
            async handler(newName, oldName) {
                this.dateVal = await this.$DateManag()
                if(newName){
                    this.getData(newName)
                }
            },
            immediate: true
        },
        maxKey (val) {
            this.AdvantageIndustryText(val)
        }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    mounted(){
        this.chart = this.$echarts.init(document.getElementById('pie'),'macarons')
        this.chart.on('click', this.chartClick)
        this.getData()
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2) {
            return 'warning-row';
            } 
            return '';
        },
        getData(){
            this.$post(this.$Url.finance.cityAnalysis, {
                "code": this.levelCode,
                "aggs": {
                    "field": "legal_status",
                    "type": "base"
                }
            }).then(res => {
                let data = res.data
                if(res.data){
                        let chartData = []
                        let data = JSON.parse(JSON.stringify(res.data))
                        data.forEach(i => {
                            this.allTotal+=i.doc_count
                        });
                        data = data.map(i=>{
                            if(i.key.length===0) {
                                return { doc_count : i.doc_count, key : '其它' }
                            }else{
                                return i
                            }
                        })
                        data.sort(function (a, b) {
                            return Number(a.doc_count)< Number(b.doc_count)?1:-1;
                        })
                        this.chartData = data // 保存的一个结果
                        this.maxKey = data[0].key
                        let num = data[0].doc_count // 最大值
                        this.Index = 0 // 默认高亮
                        this.percentage = (num/this.allTotal*100).toFixed(2)
                        this.getChart(data)
                    }
                
            }).catch(err => {})
        },
        getChart(data){
            if(this.chart !== undefined && this.chart !== null){
                let chartData = []
                for(let i in data){
                    let NameColor = '#878696'
                    let lineColor = '#ccc'
                    let fontWeight = '600'
                    if(data[i].key ===this.maxKey){
                        NameColor='#514bad'
                        fontWeight = 'bold'
                        lineColor = '#514bad'
                    }
                    chartData.push({
                        name:data[i].key,
                        value: data[i].doc_count,
                        key: data[i].key,
                        label:{
                            normal:{
                                rich: {
                                    name:{
                                        color: NameColor,
                                        fontWeight: fontWeight 
                                    } 
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: lineColor
                                }
                            }
                        }
                    })
                }
                this.chart.setOption({
                    backgroundColor: '#fff',
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)",
                        position: 'top'
                    },
                    grid:{
                        top:'50%',
                        x: '20%'
                    },
                    series: [
                        {
                            type: 'pie',
                            avoidLabelOverlap: true,
                            radius: ['35%', '45%'],
                            // startAngle:70, //起始角度
                            data: chartData,
                            minAngle: 30,
                            itemStyle:{
                                normal: {
                                    borderWidth: 3, 
                                    borderColor: '#fff',
                                }
                            },
                            labelLine: {
                                normal: {
                                    length: 20,
                                    length2: 40
                                }
                            },
                            label: {
                                normal: {
                                    formatter: e => {
                                        var newStr=" ";
                                        var start,end;
                                　　　　 var name_len=e.name.length;    　　　　　　　　　　　　   //每个内容名称的长度
                                　　　　 var max_name=10;    　　　　　　　　　　　　　　　　　　//每行最多显示的字数
                                　　　　 var new_row = Math.ceil(name_len / max_name); 　　　　// 最多能显示几行，向上取整比如2.1就是3行
                                　　　　 if(name_len>max_name){ 　　　　　　　　　　　　　　  //如果长度大于每行最多显示的字数
                                　　　　　　for(var i=0;i<new_row;i++){ 　　　　　　　　　　　   //循环次数就是行数
                                　　　　　　　　var old='';    　　　　　　　　　　　　　　　　    //每次截取的字符
                                　　　　　　　　start=i*max_name;    　　　　　　　　　　     //截取的起点
                                　　　　　　　　 end=start+max_name;    　　　　　　　　　  //截取的终点
                                　　　　　　　　if(i==new_row-1){    　　　　　　　　　　　　   //最后一行就不换行了
                                    　　　　　　　　　　old=e.name.substring(start);
                                　　　　　　　　}else{
                                    　　　　　　　　　　old=e.name.substring(start,end)+"\n";    
                                　　　　　　　　 }
                                　　　　　　　　　　 newStr+=old; //拼接字符串
                                　　　　　　  }
                                　　　   }else{                                          //如果小于每行最多显示的字数就返回原来的字符串
                                　　　　　　newStr=e.name; 
                                　　　   }
                                        return '{name|' + newStr + e.percent+'%}'
                                    },
                                    lineHeight:'16',
                                    rich: {
                                        icon: {
                                        },
                                        name: {
                                            fontSize: 12,
                                        },
                                        value: {
                                            fontSize: 18,
                                            fontWeight: 'bold',
                                        }
                                    }
                                }
                            }
                        }
                    ]
                })
                let that = this
                this.chart.dispatchAction({
                    type: "highlight",
                    dataIndex:that.Index
                });
            }
        },
        chartClick: function (v) {
            let num = v.data.value
            this.Index = v.dataIndex // 点击高亮
            this.maxKey = v.data.key
            this.percentage = (num/this.allTotal*100).toFixed(2)
            // 取消之前的高亮 或者默认
            this.chart.dispatchAction({  
                type: 'downplay'  
            });  
            this.getChart(this.chartData)
        },
        // 扇形图文字
        AdvantageIndustryText(val){
            let value = val=== '其它'? '' : val
            this.loading = true
            this.$post(this.$Url.analysis.patentList,{
                "code": this.levelCode,
                "ipi": this.ipi,
                "ips": this.ips,
                "musts": {
                    "legal_status": value
                },
                "sort": [
                    {"ad": "desc"}
                ]
            }).then(data => {
                if(data.data){
                    let that =this
                    this.data = JSON.parse(JSON.stringify(data.data))
                    this.total = data.data.total
                    this.tableData = data.data.result
                    for(let i=0;i<this.tableData.length;i++){
                        let p = this.tableData[i].pn
                        this.getPatentScore(p,function(data){
                            that.$set(that.tableData[i],'pantentScore',data.data?data.data:'暂无')
                        })
                    }
                }
                this.loading = false
            }).catch((e)=>{

            })
        },
        // 获取计算分值
        getPatentScore(p,fn){
            this.$get(this.$Url.patent.patentScore,{
                pn: p
            }).then(data => fn(data)).catch(err => {})
        },
        // 翻页
        handleCurrentChange(val){
            this.ipi = val 
            this.AdvantageIndustryText(this.maxKey)
        }
    }
}
</script>
<style lang="scss" scoped>
.solid{
    // border-bottom:1px solid #e7e8ec;
    text-align:left;
}
.name_{
    font-weight:bold;
}
.num{
    font-weight:bold;
    color:$mainColor;
}
.TextTitle{
    font-size:15px;
    width:100%;
    height:50px;
    padding-left:10px;
    color: #505058;display:flex;
    align-items:center;
    border-bottom:1px solid #ddd;
}
 .maxKeyName{
     border-bottom:1px solid #ddd;
     line-height:40px;
     color:#514bad;
     font-weight: bold;
     font-size:16px;
 }
</style>